<template>
  <div class="login-container">
    <div class="login-flex">
      <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="login-form"
    >
      <!-- <h2 class="login-title">登录</h2> -->
      <div style="text-align:center;margin-bottom:30px">
        <h1>访客统计登录后台</h1>
      </div>
      <div class="header">
        <el-form-item label="账号" class="names" prop="admin_name">
          <el-input
            type="admin_name"
            v-model="ruleForm.admin_name"
            placeholder="请输入账号"
            autocomplete="off"
            class="inp"
          ></el-input>
        </el-form-item>
      </div>
      <div class="header">
        <el-form-item label="密码" class="names" prop="pass">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="ruleForm.pass"
            autocomplete="off"
            class="inp"
          ></el-input>
        </el-form-item>
      </div>
      <!-- <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="login()" class="btn"  :plain="true"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
// import log from '../../api/log';
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { log } from "../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
        return;
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    //   用户名
    var validateadmin_name = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
        return;
      } else {
        callback();
      }
    };
    //这里存放数据
    return {
      ruleForm: {
        pass: "123456",
        admin_name: "superadmin",
      },
      rules: {
        // 密码
        pass: [{ validator: validatePass, trigger: "blur" }],
        //   用户名
        admin_name: [{ validator: validateadmin_name, trigger: "blur" }],
        //   确认密码
      },
    };
  },

  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async login() {
      let res = await log({
        admin_name: this.ruleForm.admin_name,
        pwd: this.ruleForm.pass,
      });
 console.log(res);
        if (res.code == "00000") {
            this.$message({
              message: "登陆成功",
              type: "success",
            });
            console.log(res.admin)
            let admin = JSON.stringify(res.admin)
            sessionStorage.setItem("token", res.token);
            sessionStorage.setItem("admin",admin);
            this.$router.push("/visitorindex");
        } else if (!res.code == "00000"||this.ruleForm.admin_name==''||this.ruleForm.pass=='') {
          this.$message.error(res.msg);
          return;
        } else {
          this.$message.error(res.msg);
          return;
        }

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  },
};
</script>
 
<style scoped lang='less'>
body {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}
.names{
  font-size:30px;
  font-weight: bold;
}

.header{
  margin-right: 20px;
}

.login-flex{
  display: flex;
  justify-content: center;
  height:100%;
  align-items: center;
}
.login-form {
  padding: 70px 25px;
  width: 450px;
  //  background-color: unset;
  background-color:#fff; 
  border-radius: 20px;
  opacity:0.9;/* 透明背景色 */
}
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../images/index/微信图片_20220406150300.jpg")top center;
  background-size:100%  100%;
}
.login-title {
  color: #303133;
  text-align: center;
  margin-left: 15%;
}
.btn {
  width:350px;
}

.inp{
  border:solid 1px #ddd;
  border-radius: 5px;
}
</style>